<template>
  <div class="cost-wrap">
    <div class="cost-item">
      <div class="cost-item-num-box">
        <count-to
          :start-val="0"
          :decimals="2"
          :end-val="+accountInfo.collected_agent_fee || 0"
          :duration="300"
          class="cost-item-num"
        />
      </div>
      <div class="cost-item-text cost-item-text1">
        <img class="icon" src="@/assets/home/icon8.jpg" />
        <span>待收代理费</span>
      </div>
    </div>
    <div class="cost-item">
      <div class="cost-item-num-box">
        <count-to
          :start-val="0"
          :decimals="2"
          :end-val="+accountInfo.return_deposit || 0"
          :duration="300"
          class="cost-item-num"
        />
      </div>
      <div class="cost-item-text cost-item-text2">
        <img class="icon" src="@/assets/home/icon9.jpg" />
        <span>待返订金</span>
      </div>
    </div>
    <div class="cost-item">
      <div class="cost-item-num-box">
        <count-to
          :start-val="0"
          :decimals="2"
          :end-val="+accountInfo.has_sale || 0"
          :duration="300"
          class="cost-item-num"
        />
      </div>
      <div class="cost-item-text cost-item-text3">
        <img class="icon" src="@/assets/home/icon10.jpg" />
        <span>累计促成交易</span>
      </div>
    </div>
    <div class="cost-item">
      <div class="cost-item-num-box">
        <count-to
          :start-val="0"
          :decimals="2"
          :end-val="+accountInfo.has_agent_fee || 0"
          :duration="300"
          class="cost-item-num"
        />
      </div>
      <div class="cost-item-text cost-item-text4">
        <img class="icon" src="@/assets/home/icon11.jpg" />
        <span>累计收取代理费</span>
      </div>
    </div>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
export default {
  props: {
    accountInfo: {
      type: Object
    }
  },
  components: {
    CountTo
  }
};
</script>

<style lang="scss" scoped>
.cost-wrap {
  width: 100%;
  height: 140px;
  background: #fff;
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
  .cost-item {
    width: 25%;
    margin: auto 0;
    position: relative;
    text-align: center;
    border-right: 1px solid #ebf0f2;
    box-sizing: border-box;
    &:last-of-type {
      border: none;
    }
    .cost-item-num-box {
      font-size: 24px;
      font-weight: bold;
      color: #333;
      margin-bottom: 20px;
    }
    .cost-item-text {
      font-size: 16px;
      position: relative;
      span {
        position: relative;
        bottom: 10px;
        margin-left: 10px;
      }
      &.cost-item-text1 {
        color: #14b688;
      }
      &.cost-item-text2 {
        color: #6166df;
      }
      &.cost-item-text3 {
        color: #d84081;
      }
      &.cost-item-text4 {
        color: #f0760c;
      }
    }
  }
}
</style>